<template>
  <!-- pt-10 pb-10 -->
  <view
      :style="{
      background: bgColor,
      height: topHeight + 'px',
      paddingTop: paddingTop,
    }"
      class="byt-top-box"
      :class="borShow ? 'byt-top-box-border' : ''"
  >
    <view class="byt-top-left">
      <image
          v-if="backShow"
          class="byt-top-left-img"
          :src="'/static/leftopen.png'"
          @click="showDrawer"
          mode=""
      ></image>
    </view>

    <slot name="title">
      <!-- 自定义透明下拉框 -->
      <view class="transparent-dropdown-container">
        <view
            class="dropdown-trigger"
            @click="toggleDropdown"
        >
          <text class="dropdown-text">{{ selectedText || '请选择' }}</text>
          <uv-icon :name="dropdownOpen ?'arrow-up-fill':'arrow-down-fill'" size="12"></uv-icon>
        </view>

        <view
            v-if="dropdownOpen"
            class="dropdown-menu"
            @click.stop=""
        >
          <view
              v-for="item in dropdownOptions"
              :key="item.value"
              class="dropdown-item"
              @click="selectItem(item)"
          >
            <text>{{ item.name }}</text>
            <image
                v-if="item.id === selectedValue"
                class="check-icon"
                :src="'/static/ok.svg'"
            ></image>
          </view>
        </view>
      </view>
    </slot>

    <view class="byt-top-right">
      <image
          class="byt-top-right-img"
          :src="'/static/newChat.png'"
          @click="reset"
          mode=""
      ></image>
    </view>
  </view>

  <uni-drawer ref="showRight" mode="left" width="240">
    <!-- 抽屉容器：使用相对定位，适配状态栏 -->
    <view class="drawer-wrapper" :style="{ marginTop: statusBarHeight + 'px' }">
      <!-- 标题区域 -->
      <view class="drawer-header">
        <view class="byt-d1">对话记录</view>
      </view>

      <!-- 滚动列表区域：高度减去标题和底部信息区域 -->
      <view class="drawer-scroll-container">
        <scroll-view
            style="height: 100%;-webkit-overflow-scrolling:touch"
            :scroll-y="true"
        >
          <uni-list :border="false">
            <uni-list-item
                :border="false"
                v-for="item in conversationList"
                :key="item.id"
                :title="item.title.length>10?item.title.substring(0,10)+'...':item.title"
                clickable
                @click="selectConversation(item)"
                @longpress="showContextMenu($event, item)"
                :style="{
                backgroundColor: (item.id === selectedId ? '#E6F2FF' : '') +
                                 (item.id === contextMenuSelectedId ? 'rgba(22, 155, 213, 0.2)' : ''),
                color: item.id === selectedId ? '#1890FF' : '#333',
                borderRadius: '16rpx',
                transition: 'all 0.3s ease',
                marginLeft: '8rpx',
                marginRight: '8rpx',
                borderLeft: item.id === contextMenuSelectedId ? '4rpx solid #169BD5' : 'none'
              }"
            ></uni-list-item>
          </uni-list>
        </scroll-view>
      </view>

      <!-- 用户信息区域：固定在底部，不遮挡列表 -->
      <view class="drawer-footer" @click="footerClick">
        <uni-row class="byt-info">
          <uv-avatar :src="avatar" size="32" class="info-avatar"></uv-avatar>
          <uv-text :text="userData.user?.nickName || '未登录'" class="info-text"></uv-text>
          <uv-icon name="more-dot-fill" style="margin-right: 8rpx"></uv-icon>
        </uni-row>
      </view>
    </view>
  </uni-drawer>

  <uv-popup ref="footerPopup"
            mode="bottom"
            :closeOnClickOverlay="false"
            :safeAreaInsetBottom="true"
            round="16"
            bgColor="#f4f4f5"
  >
    <view :style="{'height': this.windowHeight}">
      <!-- 顶部标题栏：包含关闭按钮和设置标题 -->
      <uni-row class="popup-header">
        <view class="popup-empty"></view> <!-- 占位元素，使标题居中 -->
        <view class="popup-title">设置</view>
        <view class="popup-close" @click="footerClose">
          <uv-icon name="close-circle" size="24"></uv-icon>
        </view>
      </uni-row>

      <!-- 这里可以添加设置内容 -->
      <uni-row class="popup-content">
        <!-- 设置项将在这里添加 -->
        <uni-row class="clickable-row">
          <view class="title">
            账户
          </view>
        </uni-row>
        <uni-row>
          <view style="background-color: #ffffff;border-radius: 32rpx;width: 100%;margin-bottom: 48rpx">
            <view style="height: 80rpx;display: flex;align-items: center;padding-left: 16rpx;padding-right: 24rpx;justify-content: space-between;">
              <view style="display: flex;align-items: center;">
                <uv-icon name="phone" size="18" color="#000000"></uv-icon>
                <view style="margin-left: 16rpx">手机号</view>
              </view>
              <view style="display: flex;align-items: center;gap: 12rpx;">
              <view style="color: #a9a9a9">{{ userData.user?.phonenumber || '未绑定' }}</view>
            </view>
            </view>
          </view>
        </uni-row>
        <uni-row>
          <view class="title">
            关于
          </view>
        </uni-row>
        <uni-row @click="checkUpdate" class="clickable-row">
          <view style="background-color: #ffffff;border-radius: 32rpx;width: 100%;margin-bottom: 48rpx">
            <view style="height: 80rpx;display: flex;align-items: center;padding-left: 16rpx;padding-right: 24rpx;justify-content: space-between;">
              <view style="display: flex;align-items: center;">
                <uv-icon name="info-circle" size="18" color="#000000"></uv-icon>
                <view style="margin-left: 16rpx">检查更新</view>
              </view>
              <view style="display: flex;align-items: center;gap: 12rpx;">
              <view style="color: #a9a9a9">{{ userData.user.appVersion===null ? maskPhoneNumber(userData.user.appVersion) : '1.0.0' }}</view>
              <uv-icon name="arrow-right" size="14" color="#a9a9a9"></uv-icon>
              </view>
            </view>
          </view>
        </uni-row>
        <uni-row @click="exit" class="clickable-row">
          <view style="background-color: #ffffff;border-radius: 32rpx;width: 100%;margin-bottom: 48rpx">
            <view style="height: 80rpx;display: flex;align-items: center;padding-left: 16rpx;padding-right: 24rpx;justify-content: space-between;">
              <view style="display: flex;align-items: center;">
                <uni-icons type="undo-filled" size="18" color="#000000"></uni-icons>
                <view style="margin-left: 16rpx">退出登录</view>
              </view>
              <view style="display: flex;align-items: center;gap: 12rpx;">
              </view>
            </view>
          </view>
        </uni-row>
        <!-- 退出登录弹窗 -->
        <view class="custom-modal-container" v-if="showExitModal">
          <view class="custom-modal-mask"></view>
          <view class="custom-modal-content">
            <view class="custom-modal-title">退出登录</view>
            <view class="custom-modal-message">
              确定要退出登录吗？
            </view>
            <view class="custom-modal-buttons">
              <uni-row style="width: 100%">
                <uni-col :span="12" style="border-right: 2rpx solid #eee;padding: 8rpx">
                  <uv-button type="default" @click="closeExitModal">取消</uv-button>
                </uni-col>
                <uni-col :span="12" style="padding: 8rpx">
                  <uv-button type="danger" @click="confirmExit"><view style="color: #5a5aff">确定</view></uv-button>
                </uni-col>
              </uni-row>
            </view>
          </view>
        </view>

      </uni-row>
    </view>
  </uv-popup>

  <!-- 右键菜单组件 -->
  <view
      v-if="contextMenuVisible"
      class="context-menu"
      :style="{
      left: contextMenuX + 'px',
      top: contextMenuY + 'px'
    }"
      @click.stop
  >
    <view class="context-menu-item" @click="renameConversation(contextMenuItem)">
      <uv-icon name="edit-pen" size="14" color="#333"></uv-icon>
      <text>重命名</text>
    </view>
    <view class="context-menu-item" @click="deleteConversation(contextMenuItem)">
      <uv-icon name="trash" size="14" color="#FF4500"></uv-icon>
      <text>删除</text>
    </view>
  </view>

  <!-- 遮罩层 -->
  <view
      v-if="contextMenuVisible"
      class="context-menu-overlay"
      @click="closeContextMenu"
  ></view>

  <!-- 自定义弹窗组件 -->
  <view class="custom-modal-container" v-if="showRenameModal">
    <view class="custom-modal-mask" @click="closeRenameModal"></view>
    <view class="custom-modal-content">
      <view class="custom-modal-title">重命名对话</view>
      <view class="custom-modal-input">
        <uv-input
            v-model="newTitle"
            placeholder="请输入新的对话名称"
            :focus="showRenameModal"
            :customStyle="{ backgroundColor: '#f5f5f5' }"
        />
      </view>
      <view class="custom-modal-buttons">
        <uni-row style="width: 100%">
          <uni-col :span="12" style="border-right: 2rpx solid #eee;padding: 8rpx">
            <uv-button type="default" @click="closeRenameModal" >取消</uv-button>
          </uni-col>
          <uni-col :span="12" style="padding: 8rpx">
            <uv-button type="default" @click="confirmRename"><view style="color: #5a5aff">确定</view></uv-button>
          </uni-col>
        </uni-row>
      </view>
    </view>
  </view>

  <view class="custom-modal-container" v-if="showDeleteModal">
    <view class="custom-modal-mask" @click="closeDeleteModal"></view>
    <view class="custom-modal-content">
      <view class="custom-modal-title">确认删除</view>
      <view class="custom-modal-message">
        确定要删除对话"{{deleteTitle}}"吗？此操作不可撤销。
      </view>
      <view class="custom-modal-buttons">
        <uni-row style="width: 100%">
          <uni-col :span="12" style="border-right: 2rpx solid #eee;padding: 8rpx">
            <uv-button type="default" @click="closeDeleteModal">取消</uv-button>
          </uni-col>
          <uni-col :span="12" style="padding: 8rpx">
            <uv-button type="danger" @click="confirmDelete"><view style="color: #e03e3e">删除</view></uv-button>
          </uni-col>
        </uni-row>
      </view>
    </view>
  </view>

</template>

<script>
import { getNavbarHeight } from "../../../utils/hooks.js";
import {assistant, published, deleteConversation, updateConversation} from '../../../common/api.js';
import {showToast} from "@/uni_modules/byt-ai-agent-uni/utils";

export default {
  name: "navbar",
  emits: ['select-conversation', 'dropdown-change', 'resetconv', 'dropdown-click'],
  props: {
    // 头部标题
    title: {
      type: String,
      default: "",
    },
    // 是否显示返回按钮
    backShow: {
      type: Boolean,
      default: true,
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: "white",
    },
    // 是否显示下边框线
    borShow: {
      type: Boolean,
      default: true,
    },
    id: {
      type: Number,
      default: null,
    },
    // 下拉框选项
    dropdownOptions: {
      type: Array,
      default: () => [
      ]
    },
    // 下拉框默认选中值
    defaultDropdownValue: {
      type: [Number, String],
      default: null
    },
    userData: {
      type: Object,
      default: {}
    },
    avatar:{
      type: String,
      default: "/static/role_icon_1.svg",
    },
  },
  data() {
    return {
      topHeight: getNavbarHeight(),
      paddingTop: "0px",
      // 新增：状态栏高度，解决标题被遮挡问题
      statusBarHeight: 0,
      conversationList: [],
      dropdownOpen: false,
      selectedValue: null,
      selectedId: null,

      // 右键菜单相关
      contextMenuVisible: false,
      contextMenuX: 0,
      contextMenuY: 0,
      contextMenuItem: null,
      contextMenuSelectedId: null,

      // 自定义弹窗相关
      showRenameModal: false,
      showDeleteModal: false,
      showExitModal: false,
      newTitle: '',
      deleteId: null,
      deleteTitle: '',
      windowHeight: '600px'
    };
  },
  computed: {
    selectedText() {
      if (this.selectedValue === null || this.selectedValue === undefined) return null;
      const item = this.dropdownOptions.find(item => item.id === this.selectedValue);
      return item ? item.name : null;
    }
  },
  created() {
    const systemInfo = uni.getSystemInfoSync();
    // 获取状态栏高度并设置
    this.windowHeight = (systemInfo.windowHeight-50) +'px'
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    this.paddingTop = this.statusBarHeight ? this.statusBarHeight + "px" : "0px";
  },
  methods: {
    checkUpdate() {
      showToast('无需更新！')
    },
    maskPhoneNumber(phone) {
      // 检查手机号是否有效
      if (!phone || typeof phone !== 'string') {
        return '未绑定';
      }

      // 去除可能存在的空格或其他字符
      const cleanedPhone = phone.replace(/\D/g, '');

      // 检查手机号长度是否为11位
      if (cleanedPhone.length !== 11) {
        return cleanedPhone; // 非标准手机号返回原始值
      }

      // 保留前3位和后4位，中间用****代替
      return cleanedPhone.substr(0, 3) + '****' + cleanedPhone.substr(7, 4);
  },
    footerClick() {
      this.$refs.footerPopup.open()
    },
    footerClose() {
      this.$refs.footerPopup.close()
    },
    toggleDropdown() {
      this.dropdownOpen = !this.dropdownOpen;
      if (this.dropdownOpen) {
        this.$emit('dropdown-click');
      }
    },

    selectItem(item) {
      if (this.selectedValue !== item.id) {
        this.selectedValue = item.id;
        this.$emit('dropdown-change', item);
      }
      this.dropdownOpen = false;
      uni.$emit('click1', '123');
    },

    closeDropdown() {
      this.dropdownOpen = false;
    },

    change(e) {
      console.log("e:", e);
    },
    titleclick() {
      alert(this.title);
    },
    backClick() {
      if (this.backShow) {
        uni.navigateBack(-1);
      }
    },
    exit() {
      this.showExitModal = true;
    },
    confirmExit() {
      uni.removeStorageSync('bytToken');
      uni.redirectTo({
        url: '/pages/login/index'
      });
    },
    closeExitModal() {
      this.showExitModal = false;
    },
    showDrawer() {
      this.getConversation();
      this.$refs.showRight.open();
    },
    closeDrawer() {
      this.$refs.showRight.close();
    },
    async getConversation() {
      try {
        const response = await assistant(this.id);
        if (response.code === 200 && response.conversations) {
          this.conversationList = response.conversations;
        } else {
          console.error('获取对话列表失败', response.msg);
        }
      } catch (error) {
        console.error('请求出错', error);
      }
    },
    selectConversation(item) {
      this.selectedId = item.id;
      this.contextMenuSelectedId = null;
      this.closeDrawer();
      this.$emit('select-conversation', item);
    },
    reset() {
      this.selectedId = null;
      this.contextMenuSelectedId = null;
      this.$emit('resetconv');
    },

    showContextMenu(e, item) {
      e.stopPropagation();

      const windowWidth = uni.getSystemInfoSync().windowWidth;
      const windowHeight = uni.getSystemInfoSync().windowHeight;
      const menuWidth = 180;
      const menuHeight = 80;

      let x = e.touches[0].clientX;
      let y = e.touches[0].clientY;

      if (x + menuWidth > windowWidth) {
        x = windowWidth - menuWidth;
      }

      if (y + menuHeight > windowHeight) {
        y = windowHeight - menuHeight;
      }

      this.contextMenuX = x;
      this.contextMenuY = y;
      this.contextMenuItem = item;
      this.contextMenuSelectedId = item.id;
      this.contextMenuVisible = true;
    },

    closeContextMenu() {
      this.contextMenuVisible = false;
      this.contextMenuSelectedId = null;
    },

    renameConversation(item) {
      this.closeContextMenu();
      this.newTitle = item.title;
      this.deleteId = item.id;
      this.showRenameModal = true;
    },

    confirmRename() {
      if (this.newTitle.trim()) {
        this.updateConversationTitle(this.deleteId, this.newTitle.trim());
        this.showRenameModal = false;
      }
    },

    closeRenameModal() {
      this.showRenameModal = false;
    },

    async updateConversationTitle(conversationId, newTitle) {
      try {
        const response = await updateConversation({
          id: conversationId,
          name: newTitle
        });

        if (response.code === 200) {
          await this.getConversation();
          await uni.showToast({
            title: '重命名成功',
            icon: 'success'
          });
        } else {
          await uni.showToast({
            title: '重命名失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('重命名出错', error);
        await uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      }
    },

    deleteConversation(item) {
      this.closeContextMenu();
      this.deleteId = item.id;
      this.deleteTitle = item.title;
      this.showDeleteModal = true;
    },

    confirmDelete() {
      this.deleteConversationApi(this.deleteId);
      this.showDeleteModal = false;
    },

    closeDeleteModal() {
      this.showDeleteModal = false;
    },

    async deleteConversationApi(conversationId) {
      try {
        const response = await deleteConversation(conversationId);

        if (response.code === 200) {
          if (conversationId === this.selectedId) {
            this.selectedId = null;
          }

          this.getConversation();
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('删除出错', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
/* 新增：popup相关样式 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
}

.popup-close {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  flex: 1;
  text-align: center;
}

.popup-empty {
  width: 40rpx; /* 与关闭按钮宽度一致，保证标题居中 */
  height: 40rpx;
}

.popup-content {
  padding: 30rpx;
  min-height: 200rpx; /* 确保有足够空间显示内容 */
}

/* 抽屉容器：相对定位作为参照，适配状态栏 */
.drawer-wrapper {
  position: relative;
  width: 100%;
  height: calc(100% - var(--status-bar-height, 0px));
  box-sizing: border-box;
  padding-top: 60rpx;
  padding-bottom: 80rpx;
}

/* 标题区域：固定在顶部 */
.drawer-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60rpx;
  display: flex;
  align-items: center;
  padding-left: 24rpx;
  padding-top: 10rpx;
}

/* 滚动容器：填充剩余空间，不被底部遮挡 */
.drawer-scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 底部用户信息区域：固定在抽屉底部 */
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  background-color: #fff;
  border-top: 1px solid #f5f5f5;
}

/* 用户信息样式 */
.byt-info {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  width: 100%;
}

.info-avatar {
  margin-right: 16rpx;
  border: 1px solid #eee;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-text {
  font-size: 28rpx;
  color: #333;
  line-height: 32rpx;
}

.byt-d1 {
  color: #228d10;
  font-size: 28rpx;
  font-weight: 500;
}

/* 顶部导航栏样式 */
.byt-top-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.byt-top-box-border {
  border-bottom: 1px solid #f1f1f1;
}

.byt-top-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 200rpx;
  height: 60rpx;
  padding-left: 24rpx;
}

.byt-top-left-img {
  margin-left: 8rpx;
  width: 40rpx;
  height: 54rpx;
}

.byt-top-right-img {
  margin-right: 8rpx;
  width: 40rpx;
  height: 40rpx;
}

.byt-center-title {
  font-size: 36rpx;
  text-align: center;
  white-space: nowrap;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.byt-top-right {
  width: 200rpx;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding-right: 24rpx;
}

/* 透明下拉框样式 */
.transparent-dropdown-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 36rpx;
  width: 100%;
  height: 100%;
}

.dropdown-text {
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 4px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 300rpx;
  overflow-y: auto;
  margin-top: 8rpx;
}

.dropdown-item {
  padding: 24rpx 30rpx;
  color: #333;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid rgba(241, 241, 241, 0.8);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: rgba(240, 240, 240, 0.6);
}

.check-icon {
  width: 24rpx;
  height: 24rpx;
}

/* 右键菜单样式 */
.context-menu {
  position: fixed;
  z-index: 9999;
  width: 180rpx;
  background-color: white;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transform-origin: top left;
  animation: fadeIn 0.2s ease-out;
}

.context-menu-item {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  color: #333;
  transition: background-color 0.2s;
}

.context-menu-item:hover {
  background-color: #f5f5f5;
}

.context-menu-item text {
  margin-left: 12rpx;
}

.context-menu-item:nth-child(1) {
  border-bottom: 1rpx solid #f1f1f1;
}

.context-menu-item:nth-child(2) uv-icon {
  color: #FF4500;
}

.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 9998;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 自定义弹窗样式 */
.custom-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.custom-modal-content {
  position: relative;
  z-index: 10;
  width: 80%;
  max-width: 600rpx;
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.custom-modal-title {
  padding: 32rpx 32rpx 24rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  color: #333;
}

.custom-modal-message {
  padding: 0 32rpx 32rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

.custom-modal-input {
  padding: 0 32rpx 32rpx;
}

.custom-modal-input input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  border: 1rpx solid #e3e3e3;
  border-radius: 12rpx;
  font-size: 28rpx;
  background-color: #f1f1f1;
}

/* 自定义弹窗按钮样式 */
.custom-modal-buttons {
  display: flex;
  border-top: 1rpx solid #eee;
}

.custom-modal-buttons uv-button {
  margin: 0 50rpx;
}

.title {
  font-size: 24rpx;color:#a9a9a9;margin-left: 16rpx;margin-bottom: 8rpx;
}

/* 在<style scoped>中添加 */
.clickable-row {
  /* 移除默认点击高亮 */
  -webkit-tap-highlight-color: transparent;
}

.clickable-row:active view {
  /* 点击时的背景色变化 */
  background-color: #f5f5f5 !important;
}
</style>
